<template>
  <div class="layout-padding">
    <el-tabs type="border-card" v-model="state.activeName" @tab-change=changeTabs>
      <el-tab-pane label="活动配置" name="prizes">
        <Prizes ref="prizesRef" />
      </el-tab-pane>
      <el-tab-pane label="中奖历史" name="history">
        <History ref="historyRef" />
      </el-tab-pane>
      <el-tab-pane label="管理员管理" name="admin">
        <Admin ref="adminRef" />
      </el-tab-pane>
    </el-tabs>
  </div>
  <div class="logout">
    <el-button type="primary" @click="layout">退出</el-button>
  </div>
</template>

<script lang='ts' setup>
import { ref, reactive, defineAsyncComponent } from 'vue';
import { useRouter } from 'vue-router'
import { ElMessageBox } from 'element-plus';
import { Session } from '@/utils/storage';
import { useLogoutApi } from '@/api/login';
const router = useRouter();

const History = defineAsyncComponent(() => import("@/views/history/index.vue"));
const Prizes = defineAsyncComponent(() => import("@/views/prizes/index.vue"))
const Admin = defineAsyncComponent(() => import("@/views/admin/index.vue"))
const prizesRef = ref()
const historyRef = ref()
const adminRef = ref()

const state = reactive({
  activeName: 'prizes',
  pagenation: {
    total: 0,
    pageNum: 1,
    pageSize: 10,
  },
  prizeData: [],
  historyData: [],
  adminData: [],
})

const layout = () => {
  ElMessageBox.confirm(
    '是否退出抽奖后台管理系统?',
    '退出登录',
    {
      confirmButtonText: '确认',
      cancelButtonText: '取消',
      type: 'warning',
    }
  )
    .then(() => {
      useLogoutApi().then(() => {
        Session.remove("token")
        router.replace({
          name: "Login",
        });
      })

    })
}

const changeTabs = (tabsName: string) => {
  switch (tabsName) {
    case 'prizes':
      prizesRef.value.getPrizeTableData()
    case 'history':
      historyRef.value.getHistoryTableData()
    case 'admin':
      adminRef.value.getAdminTableData()
  }
};

</script>
<style scoped lang='scss'>
.logout {
  position: absolute;
  top: 24px;
  right: 24px;
}
</style>